<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>地图</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      height: 100%;
      width: 100%;
    }

    .amap-icon img,
    .amap-marker-content img {
      width: 25px;
      height: 34px;
    }

    .cus_info_window {
      background-color: #fff;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=4038ccfd524de440494c4f5431dea96a"></script>
  <script type="text/javascript">
    let latitude = 0    //纬度
    let longitude = 0   //经度

    // 获取当前经纬度
    axios({
      method: 'get',
      url: 'https://ipapi.co/json/', // 替换为你的API地址
    })
      .then(function (response) {
        console.log(response.data);
        latitude = response.data.latitude
        longitude = response.data.longitude
        console.log(longitude, latitude)

        // 创建地图实例
        var map = new AMap.Map("container", {
          zoom: 13,
          center: [longitude, latitude],
          resizeEnable: true
        });
        

        // 创建点覆盖物
        var marker = new AMap.Marker({
          position: new AMap.LngLat(longitude, latitude),
          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          offset: new AMap.Pixel(-13, -30)
        });
        map.add(marker);

        // 创建信息窗体
        var infoWindow = new AMap.InfoWindow({
          isCustom: true,  // 使用自定义窗体
          content: '<div class="cus_info_window">HELLO,AMAP!</div>', // 信息窗体的内容可以是任意 html 片段
          offset: new AMap.Pixel(16, -45)
        });
        var onMarkerClick = function (e) {
          infoWindow.open(map, e.target.getPosition()); // 打开信息窗体
          // e.target 就是被点击的 Marker
        }

        marker.on('click', onMarkerClick); // 绑定 click 事件
      })
      .catch(function (error) {
        console.log(error);
      });



    // <!--    const lineArr = [-->
    // <!--      [116.368904, 39.913423],-->
    // <!--      [116.382122, 39.901176],-->
    // <!--      [116.387271, 39.912501],-->
    // <!--      [116.398258, 39.904600]-->
    // <!--    ];-->
    // <!--    var polyline = new AMap.Polyline({-->
    // <!--      path: lineArr,          // 设置线覆盖物路径-->
    // <!--      strokeColor: "#3366FF", // 线颜色-->
    // <!--      strokeWeight: 5,        // 线宽-->
    // <!--      strokeStyle: "solid",   // 线样式-->
    // <!--    });-->
    // <!--    map.add(polyline);-->
  </script>
</body>

</html>